<template>
  <div class="premium">
    <header>
      <span class="back" @click="$router.back(-1)">
        <svg-icon icon-class="back"></svg-icon>
      </span>
      <svg-icon class="premiumIcon" icon-class="premiumIcon"></svg-icon>
      <span></span>
    </header>
    <div class="main">
      <dl :class="balance.isVip ? 'vip-userInfo-card' : 'userInfo-card'">
        <dt
          @click="!userInfo && loginPopup()"
          :class="userInfo ? 'avatar' : 'visitorAvatar'"
        >
          <img :src="userInfo ? userInfo.coverUrl : visitorAvatar" />
        </dt>
        <dd>
          <h3 v-text="userInfo ? userInfo.authorName : 'Visitor'"></h3>
          <p
            v-text="
              balance.isVip
                ? `Your expiration date：${utils.dateFormat(
                    balance.endTime,
                    'MM-DD-YYYY HH:MM:SS'
                  )}`
                : 'Join our membership get read all the novels and enjoy more privileges.'
            "
          ></p>
        </dd>
      </dl>
      <svg-icon
        class="exclusiveInterest"
        :icon-class="
          balance.isVip ? 'exclusive-interest-on' : 'exclusive-interest-off'
        "
      ></svg-icon>
      <div class="pay-box">
        <h2 class="title">Become a premium now</h2>
        <ul class="card-list">
          <li
            v-for="item of list"
            :key="item.vipId"
            :class="{
              dot: item.characterCorner ? true : false,
              active: item.vipId == currentCard.vipId,
            }"
            :li-content="item.characterCorner"
            @click="selectCard(item)"
          >
            <span
              class="desc"
              v-text="item.vipNameEns"
              :desc-content="item.text"
            ></span>
            <span
              class="price"
              v-text="'$' + item.price"
              :price-content="'$' + item.linePrice"
            ></span>
          </li>
        </ul>
        <pay-list :currentCard="currentCard" @recharge="recharge"></pay-list>
        <div class="tips">
          <h4>Tips:</h4>
          <p>
            Reminder: If your membership has not expired yet, and you choose to
            renew, the extention will begin right after the expriation day.
            Please feel free to renew.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import PayList from "components/common/PayList/Index";
export default {
  data() {
    return {
      visitorAvatar: require("@/assets/images/visitor-avatar.png"), //游客头像
      list: [], //会员套餐列表
      PayNow: 9.99, //支付价格
      currentCard: {}, //当前选中的premium-card
    };
  },
  components: {
    PayList,
  },
  computed: {
    ...mapGetters(["balance", "userInfo"]),
  },
  watch: {},
  created() {},
  mounted() {
    this.getVipPremium();
  },
  methods: {
    ...mapMutations({
      setBalance: "SET_BALANCE",
      setShowPopup: "SET_SHOW_POPUP",
      setCurrentPopup: "SET_CURRENT_POPUP",
    }),
    //子组件 充值完成调用
    recharge(res) {
      this.getUserBalanceAndVip();
      if (res.isFirstRecharge === 1) {
        this.getVipPremium();
      }
    },
    selectCard(item) {
      console.log(item);
      this.currentCard = item;
    },
    // 获取所有premium会员相关配置信息
    async getVipPremium() {
      let res = await this.$api.home.getVipPremium({});
      console.log(res);
      if (res.code === 1) {
        this.list = res.source;
        this.currentCard = this.list[0];
      }
    },
    loginPopup() {
      this.setCurrentPopup({ currentPopup: "login" });
      this.setShowPopup(true);
    },
    // 获取用户余额信息
    async getUserBalanceAndVip() {
      let res = await this.$api.home.getUserBalanceAndVip({});
      if (res.code === 1) {
        this.setBalance(res.source);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.premium {
  background: url(../../../assets/images/login-back.png) no-repeat top fixed;
  padding-bottom: 108px;
  header {
    padding: 45px 15px 22px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .back {
      .svg-icon {
        width: 56px;
        height: 56px;
      }
    }
    .premiumIcon {
      width: 200px;
      height: 36px;
    }
  }
  .main {
    padding: 32px;
    > dl {
      width: 100%;
      height: 200px;
      display: flex;
      align-items: center;
      border-radius: 28px;
      &.userInfo-card {
        color: #ffffff;
        background: #eb6f7a;
      }
      &.vip-userInfo-card {
        color: #d4902f;
        background: #f2d39f;
      }
      dt {
        width: 112px;
        height: 112px;
        margin-left: 48px;
        border-radius: 112px;
        position: relative;
        img {
          width: 112px;
          height: 112px;
        }
        &.visitorAvatar::before {
          content: "Login";
          font-size: 26px;
          color: #ffffff;
          text-align: center;
          line-height: 112px;
          font-weight: 500;
          border-radius: 112px;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background-color: rgba(0, 0, 0, 0.5);
        }
      }
      dd {
        margin: 0 16px;
        h3 {
          font-size: 34px;
          line-height: 56px;
          font-weight: 500;
        }
        p {
          font-size: 26px;
          line-height: 36px;
        }
      }
    }
    > .exclusiveInterest {
      width: 100%;
      height: 156px;
      margin-top: 48px;
    }
    > .pay-box {
      margin-top: 32px;
      > .title {
        color: #333333;
        line-height: 53px;
      }
      > ul.card-list {
        > li {
          width: 100%;
          height: 160px;
          padding: 36px 32px;
          box-sizing: border-box;
          border-radius: 16px;
          border: 2px solid #eeeeee;
          margin-top: 32px;
          display: flex;
          justify-content: space-between;
          position: relative;
          &:first-child {
            margin-top: 23px;
          }
          &.dot::after {
            content: attr(li-content);
            height: 30px;
            position: absolute;
            top: -15px;
            right: 0;
            padding: 0 14px;
            font-size: 22px;
            color: #ffffff;
            line-height: 30px;
            font-weight: 500;
            background: #e86472;
            border-radius: 0px 16px 0px 16px;
          }
          &.active {
            background: #fcf0df;
            border-color: #d4902f;
          }
          .desc {
            font-size: 32px;
            color: #333333;
            font-weight: 500;
            line-height: 40px;
            &::after {
              content: attr(desc-content);
              display: block;
              margin-top: 8px;
              font-size: 26px;
              color: #e86472;
            }
          }
          .price {
            font-size: 34px;
            font-weight: 500;
            color: #d4902f;
            line-height: 40px;
            text-align: right;
            &::after {
              content: attr(price-content);
              display: block;
              margin-top: 4px;
              color: #999999;
              font-size: 22px;
              text-decoration: line-through;
            }
          }
        }
      }
      > .tips {
        margin-top: 36px;
        line-height: 40px;
        color: #999999;
        font-size: 28px;
      }
    }
  }
}
</style>
